<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>漫画平台</title>
    <link rel="stylesheet" href="css\rlb1.css">
</head>

<body>
    <nav>
        <div class="nav-top"
            style=" width: 100%; height: 50px;padding: 0 5px;text-align: center;position:fixed;background-color: rgb(255, 255, 255);
            margin: 0 auto;">
            <div class="nav-all" style="width: 90%;text-align: center;">
                <span class="nav-top-left" style="display: inline-block;">
                    <a href="#"><span class="logo"><img src="image\logo.png" alt="logo" width="30px" height="30px"
                                style="top: 10px;position: relative;"><span
                                style="position: relative;">哔哩哔哩漫画</span></span></a>
                    <a href="#"><img src="image\favicon.ico" alt="" width="17px" height="17px" style="position: relative;
                    top: 3px;"><span style="margin-left: 8px;">主站</span></a>
                    <a href="#"><span>首页</span></a>
                    <a href="#"><span>主站</span></a>
                    <a href="#"><span>分类</span></a>
                    <a href="#"><span>更新</span></a>
                    <a href="#"><span>排行榜</span></a>
                </span>
                <span class="nav-top-right" style="display: inline-block;position: relative;left: 110px;">
                    <input type="search" name="" id="" placeholder="搜索" style="border: none; font-size: 12px; border-radius: 50px; width:200px; height: 35px;padding: 20px;;
                        background-color: #f6f7f8;">
                    <a href="#"><span>下载APP</span></a>
                    <a href="#"><span>登录</span></a>
                    <span>|</span>
                    <a href="#"><span>注册</span></a>
                    <a href="#"><input type="button" value="投稿" style="height: 30px; font-size: 14px;width:85px;border: none;
                            background-color: #32aaff;border-radius: 5px;color: white;margin-left: 17px;"></a>
                </span>
            </div>
        </div>
        <div class="photo" style="width: 100%;height: 440px;background-color: black;">
            <img src="" alt="">
        </div>
        <div class="nav-bottom" style="font-size: 16px;
            text-align: center;height: 80px;width: 100%;background-color: #212121;">
            <a href="#"><span>热血</span></a>
            <a href="#"><span>古风</span></a>
            <a href="#"><span>玄幻</span></a>
            <a href="#"><span>奇幻</span></a>
            <a href="#"><span>悬疑</span></a>
            <a href="#"><span>都市</span></a>
            <a href="#"><span>历史</span></a>
            <a href="#"><span>武侠仙侠</span></a>
            <a href="#"><span>游戏竞技</span></a>
            <a href="#"><span>悬疑灵异</span></a>
            <a href="#"><span>架空</span></a>
            <a href="#"><span>青春</span></a>
            <a href="#"><span>西幻</span></a>
            <a href="#"><span>现代</span></a>
            <a href="#"><span>全部</span></a>
        </div>
    </nav>
    <main style="width: 1150px;margin: 0 auto;">
        <section class="suggest" style="width: 100%;">
            <div class="suggest-box"
                style="width:1150px;margin: 0 auto;padding-top: 35px;margin-bottom: 60px;"
                id="suggest-box">
                <div style="padding: 25px 0 20px 0;"><span style="font-size: 30px;">为你推荐</span><span
                        style="color: #666666;font-size: 16px;margin-left: 10px;">PK你的最爱</span>
                </div>
                <div class="container"
                    style="width: 1150px;height: 330px;border-radius: 10px;margin-top: 15px;background-color: rgba(27,32,34,.95);color:white;">
                    <div class="content" style="padding: 20px 0 0 20px;float: left;">
                        <p style="font-size: 24px;">石纪元</p>
                        <p style="margin-top: 20px;"><span>战斗</span><span>冒险</span></p>
                        <hr style="margin: 18px 0;width: 430px;background-color:#666666 ;">
                        <p style="font-size: 14px;width: 420px;color: #d1d2d3;">那一天，世界上所有的人类都……变成了石头！
                            告白未果的热血少年大木大树和怪异度100亿%的理科天才千空
                            在灾难中生存下来的唯..</p>
                        <img src="image\yuedingdemenghuandao.png" alt="" width="58px" height="83px">
                        <img src="image\yuedingdemenghuandao.png" alt="" width="58px" height="83px">
                        <img src="image\yuedingdemenghuandao.png" alt="" width="58px" height="83px">
                        <img src="image\yuedingdemenghuandao.png" alt="" width="58px" height="83px">
                        <img src="image\yuedingdemenghuandao.png" alt="" width="58px" height="83px">
                        <img src="image\yuedingdemenghuandao.png" alt="" width="58px" height="83px">
                        <img src="image\yuedingdemenghuandao.png" alt="" width="58px" height="83px">
                    </div>
                    <img src="image\yuedingdemenghuandao.png" alt="" width="562px" height="316px" style="float: right;margin-right: 10px;border-radius: 7px;position: relative;
                        bottom: 60px;right: 12px;">
                    <div class="choose" style="width: 80px;top: 50px;font-size: 14px;
  line-height: 30px;text-align: center;padding: 5px 5px;
  left: 90%;border-radius: 5px;position:fixed;border: solid 1px #666666;">
                        <a href="#suggest-box">为你推荐</a>
                        <a href="#popular">畅销热门</a>
                        <a href="#topic">全网热议</a>
                        <a href="#finish">完结佳作</a>
                        <a href="#leaderboard">排行榜</a>
                    </div>
                </div>
            </div>
        </section>
        <section class="popular" style="width:100%;margin: 0 auto;padding-top: 10px;
       overflow: hidden;" id="popular">
            <div class="popular-box" style="
          margin-bottom:60px ;">
                <p style="padding: 60px 0 30px 0;"><span style="font-size: 30px;"><span>畅销热门</span><span
                            style="color: #666666;font-size: 16px;margin-left: 10px;">物有所值的真香漫画</span>
                </p>
                <div class="work" style="height: 400px;overflow: hidden;">
                    <div class="one" style="padding: 15px 0 0 0;float: left;">
                        <img src="image\6ecbfe47-8942-48a1-91a0-42d47ae0538d.png" alt="封面" width="223px" height="290px"
                            style="
                        border-radius: 5px;">
                        <p style="font-size: 18px;">无限魔法师</p>
                        <p><span style="font-size:14px;">畅销指数</span><span style="font-size:14px;color: orangered;position: relative
                    ;left: 5px;">819</span></p>
                    </div>
                    <div class="two" style="padding: 15px 0 0 0;float: left;margin-left:8px;">
                        <img src="image\bilanzhihai.png" alt="封面" width="223px" height="290px" style="
                        border-radius: 5px;">
                        <p style="font-size: 18px;">碧蓝之海</p>
                        <p><span style="font-size:14px;">畅销指数</span><span style="font-size:14px;color: orangered;position: relative
                    ;left: 5px;">2004</span></p>
                    </div>
                    <div class="three" style="padding: 15px 0 0 0;float: left;margin-left:8px;">
                        <img src="image\qinzhixiang.png" alt="封面" width="223px" height="290px" style="
                        border-radius: 5px;">
                        <p style="font-size: 18px;">青之箱（蓝箱）</p>
                        <p><span style="font-size:14px;">畅销指数</span><span style="font-size:14px;color: orangered;position: relative
                    ;left: 5px;">9650</span></p>
                    </div>
                    <div class="four" style="padding: 15px 0 0 0;float: left;margin-left:8px;">
                        <img src="image\jingpaidezhu.png" alt="封面" width="223px" height="290px" style="
                        border-radius: 5px;">
                        <p style="font-size: 18px;">金牌得主</p>
                        <p><span style="font-size:14px;">畅销指数</span><span style="font-size:14px;color: orangered;position: relative
                    ;left: 5px;">1503</span></p>
                    </div>
                    <div class="five" style="padding: 15px 0 0 0;float: left;margin-left:8px;">
                        <img src="image\yousouyan.png" alt="封面" width="223px" height="290px" style="
                        border-radius: 5px;">
                        <p style="font-size: 18px;">有兽焉</p>
                        <p><span style="font-size:14px;">畅销指数</span><span style="font-size:14px;color: orangered;position: relative
                    ;left: 5px;">5650</span></p>
                    </div>
                </div>
            </div>

        </section>

        <section class="topic" style="width:100%;margin: 0 auto;overflow: hidden;" id="topic">
            <div class="topic-box" style="
           margin-bottom:60px ;padding-bottom: 30px;">
                <p style="padding: 60px 0 30px 0;"><span style="font-size: 30px;"><span>全网热议</span><span
                            style="color: #666666;font-size: 16px;margin-left: 10px;">恭喜你发现宝藏漫画</span>
                </p>
                <div class="work" style="overflow: hidden;">
                    <div class="one" style="padding: 15px 0 0 0;float: left;">
                        <img src="image\zaichaoshihoumianxiyandeerren.png" alt="封面" width="223px" height="290px" style="
                    border-radius: 5px;">
                        <p style="font-size: 18px;">在超市后门吸烟的二人</p>
                        <p><span style="font-size: 14px;">热议中</span><span style="font-size: 14px;color: orangered;position: relative
                ;left: 5px;">54</span></p>
                    </div>
                    <div class="two" style="padding: 15px 0 0 0;float: left;margin-left: 8px;">
                        <img src="image\mingzhengtankenan.png" alt="封面" width="223px" height="290px" style="
                    border-radius: 5px;">
                        <p style="font-size: 18px;">名侦探柯南</p>
                        <p><span style="font-size: 14px;">热议中</span><span style="font-size: 14px;color: orangered;position: relative
                ;left: 5px;">180</span></p>
                    </div>
                    <div class="three" style="padding: 15px 0 0 0;float: left;margin-left: 8px;">
                        <img src="image\bilanzhihai.png" alt="封面" width="223px" height="290px" style="
                    border-radius: 5px;">
                        <p style="font-size: 18px;">碧蓝之海</p>
                        <p><span style="font-size: 14px;">热议中</span><span style="font-size: 14px;color: orangered;position: relative
                ;left: 5px;">59</span></p>
                    </div>
                    <div class="four" style="padding: 15px 0 0 0;float: left;margin-left: 8px;">
                        <img src="image\wojialaopolaiziyiqiannianqian.png" alt="封面" width="223px" height="290px" style="
                    border-radius: 5px;">
                        <p style="font-size: 18px;">我家老婆来自以前年前</p>
                        <p><span style="font-size: 14px;">热议中</span><span style="font-size: 14px;color: orangered;position: relative
                ;left: 5px;">179</span></p>
                    </div>
                    <div class="five" style="padding: 15px 0 0 0;float: left;margin-left: 8px;">
                        <img src="image\zhuangbeiwozuiqiang.png" alt="封面" width="223px" height="290px" style="
                    border-radius: 5px;">
                        <p style="font-size: 18px;">装备我最强</p>
                        <p><span style="font-size: 14px;">热议中</span><span style="font-size: 14px;color: orangered;position: relative
                ;left: 5px;">78</span></p>
                    </div>
                </div>
            </div>
        </section>
        <section class="finish" style="width:100%;margin: 0 auto;overflow: hidden;padding-top: 10px;
        " id="finish">
            <div class="finish-box" style="
        margin-bottom:60px ;padding-bottom: 30px;">
                <p style="padding: 60px 0 30px 0;"><span style="font-size: 30px;"><span>完结佳作</span><span
                            style="color: #666666;font-size: 24px;">一口气追到大结局</span>
                </p>
                <div class="work" style="overflow: hidden;">
                    <div class="one" style="padding: 15px 0 0 0;float: left;">
                        <img src="image\yanquan.png" alt="封面" width="223px" height="290px" style="
                border-radius: 5px;">
                        <p style="font-size: 18px;">炎拳</p>
                        <p><span style="font-size: 14px;position: relative
            ;left: 5px;">[完结]共83话</span></p>
                    </div>
                    <div class="two" style="padding: 15px 0 0 0;float: left;margin-left: 8px;">
                        <img src="image\qianqiandeqimiaomaoxian.png" alt="封面" width="223px" height="290px" style="
                border-radius: 5px;">
                        <p style="font-size: 18px;">乔乔的奇妙冒险</p>
                        <p><span style="font-size: 14px;position: relative
            ;left: 5px;">[完结]共958话</span></p>
                    </div>
                    <div class="three" style="padding: 15px 0 0 0;float: left;margin-left: 8px;">
                        <img src="image\yuedingdemenghuandao.png" alt="封面" width="223px" height="290px" style="
                border-radius: 5px;">
                        <p style="font-size: 18px;">约定的梦幻岛</p>
                        <p><span style="font-size: 14px;position: relative
            ;left: 5px;">[完结]共185话</span></p>
                    </div>
                    <div class="four" style="padding: 15px 0 0 0;float: left;margin-left: 8px;">
                        <img src="image\jiejiaoxiangyanghuawu.png" alt="封面" width="223px" height="290px" style="
                border-radius: 5px;">
                        <p style="font-size: 18px;">街角向阳花屋</p>
                        <p><span style="font-size: 14px;">热议中</span><span style="font-size: 14px;position: relative
            ;left: 5px;">179</span></p>
                    </div>
                    <div class="five" style="padding: 15px 0 0 0;float: left;margin-left: 8px;">
                        <img src="image\yuedingdemenghuandao.png" alt="封面" width="223px" height="290px" style="
                border-radius: 5px;">
                        <p style="font-size: 18px;">约定的梦幻岛</p>
                        <p><span style="font-size: 14px;position: relative
            ;left: 5px;">[完结]共185话</span></p>
                    </div>
                </div>
            </div>
        </section>
        <section class="leaderboard" style="width:100%;margin: 0 auto;overflow: hidden;padding-bottom: 50px;
         " id="leaderboard">
            <div class="leaderboard-box" style="
        padding-bottom: 30px;padding: 60px 0 30px 0;">
                <div><span style="font-size: 30px;font-weight: bold;position: relative;bottom: 5px;"><span>高能排行</span>
                        <input type="button" value="日漫榜"
                            style="margin-left: 50px;border: none;cursor: pointer;font-size: 24px;">
                        <input type="button" value="国漫榜" style="border: none;cursor: pointer;font-size: 24px;">
                        <input type="button" value="韩漫榜" style="border: none;cursor: pointer;font-size: 24px;">
                </div>
                <div class="work" style="overflow: hidden;">
                    <div class="one" style="padding: 15px 0 0 0;float: left;">

                        <img src="image\woduzishengji.png" alt="封面" width="185px" height="260px" style="
            border-radius: 5px;">
                        <p style="font-size: 18px;">我独自升级</p>
                        <p><span style="font-size: 14px;position: relative
        ;left: 5px;">逆袭 升级</span></p>
                    </div>
                    <div class="two" style="padding: 15px 0 0 0;float: left;margin-left: 8px;">

                        <img src="image\quanzhiduzheshijiao.png" alt="封面" width="185px" height="260px" style="
            border-radius: 5px;">
                        <p style="font-size: 18px;">全知读者视角</p>
                        <p><span style="font-size: 10px;position: relative
        ;left: 5px;">智斗 冒险</span></p>
                    </div>
                    <div class="three" style="padding: 15px 0 0 0;float: left;margin-left: 8px;">

                        <img src="image\woduzishengji,zhushenhuanghun.png" alt="封面" width="185px" height="260px" style="
            border-radius: 5px;">
                        <p style="font-size: 18px;">我独自升级：诸神黄昏</p>
                        <p><span style="font-size: 14px;position: relative
        ;left: 5px;">升级 强者归来</span></p>
                    </div>
                    <div class="four" style="padding: 15px 0 0 0;float: left;margin-left: 8px;">

                        <img src="image\shengjiwulinxitong.png" alt="封面" width="185px" height="260px" style="
            border-radius: 5px;">
                        <p style="font-size: 18px;">升级武林系统</p>
                    </div>
                    <div class="five" style="padding: 15px 0 0 0;float: left;margin-left: 8px;">

                        <img src="image\tiexuejianjialiequandehuigui.png" alt="封面" width="185px" height="260px" style="
            border-radius: 5px;">
                        <p style="font-size: 18px;">铁血家族猎犬的回归</p>
                        <p><span style="font-size: 14px;position: relative
        ;left: 5px;">冒险 战斗</span></p>
                    </div>
                    <div class="six" style="padding: 15px 0 0 0;float: left;margin-left: 8px;">
                        <img src="image\tiexuejianjialiequandehuigui.png" alt="封面" width="185px" height="260px" style="
            border-radius: 5px;">
                        <p style="font-size: 18px;">铁血家族猎犬的回归</p>
                        <p><span style="font-size: 14px;position: relative
        ;left: 5px;">冒险 战斗</span></p>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <footer style="background-color: #212121;width: 100%;height: 300px;color: white;">
        <div class="row-all" style="width: 1150px;margin: 0 auto;overflow: hidden;height: 100%;">
            <div class="row-one" style="margin-top: 0px;height: 60px;width: 1270px;">
                <div class="row-left" style="width: 600px;padding-top: 25px;overflow: hidden;
                height: 150px;float: left;">
                    <div class="logos" style="float: left">
                        <img src="image\logo.png" alt="" width="65px" style="position: relative;top: 20px;">
                        <span style="font-size: 24px;margin-left: 20px;color: #666666;">哔哩哔哩漫画</span>
                    </div>
                    <div class="logos-right" style="float: right;margin-right: 60px;
                    line-height: 35px;padding: 20px 60px;">
                        <p style="font-size: 14px;"><a href="#">关于我们</a>
                            <a href="#"><span style="margin-left: 30px;">联系我们</span></a>
                        </p>
                        <p style="font-size: 14px;"><a href="#">友情链接</a>
                            <a href="#"><span style="margin-left: 30px;">加入我们</span></a>
                        </p>
                    </div>
                </div>
                <div class="row-right" style="float: right;margin-right: 80px;
                width: 590px;height: 150px;padding: 45px 110px;">
                    <div style="float: left;">
                        <img src="image\🔗.svg" alt="" srcset="" width="68px">
                        <p style="font-size: 12px;margin-left: 10px;">B站官号</p>
                    </div>
                    <div style="float: left;">
                        <img src="image\🔗2.png" alt="" width="68px" style="margin-left: 55px;">
                        <p style="font-size: 12px;margin-left:70px;">新浪微博</p>
                    </div>
                    <div style="float: left;">
                        <img src="image\🔗3.png" alt="" width="68px" style="margin-left: 55px;">
                        <p style="font-size: 12px;margin-left: 30px;">下载bilibili漫画客户端</p>
                    </div>
                </div>
            </div>

            <div class="row-two" style="margin-top: 25px;width: 840px;height: 290px;">
                <div class="row-left-box" style="float: left;padding-top: 50px;width: 200px;
                height: 145px;">
                    <img src="image\hezuojigou.png" alt="" width="95px">
                    <img src="image\kankanxinwen.png" alt="" width="95px">
                </div>
                <div class="row-right-box" style="float: right;width: 600px;
                height: 145px;padding-top: 10px;">
                    <p>互联网 ICP 备案：沪 ICP备13002172 号 - 3 | 网络文化经营许可证：沪网文 [2019]3804-274 号</p>
                    <p>沪公网安备：31011002002436| 增值电信业务经营许可证 沪 B2-20100043 |资质证照</p>
                    <p>12345 政务服务便民热线|上海市互联网违法和不良信息举报中心</p>
                    <p>上海宽娱数码科技有限公司 | 地址：上海市杨浦区政立路489号 | 电话：021-25099888</p>
                </div>
            </div>
        </div>

    </footer>
    </main>
</body>

</html>